<template>
	<view>
		<view class="top-search">
			<uniSearch-bar @add="addTraveler"></uniSearch-bar>
		</view>
			<!-- :scroll-top="scrollTop"
			@scrolltoupper="upper"
			@scrolltolower="lower"
			@scroll="scroll" -->
			<scroll-view 
			scroll-y="true" 
			class="scroll-Y" 
			>
				<traveler-list @changes="change" :traveler="listTrave" @click="editTravel"></traveler-list>
			</scroll-view>
		<view class="footer">
			<button type="default" @click="saveTraveler">确定</button>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from './components/search-bar.vue'
	import travelerList from './components/traveler-list.vue'
	import helpstore from '@/common/js/util-store.js'
	export default {
		components: {
			uniSearchBar,
			travelerList
		},
		data() {
			return {
				listTrave:[]
			}
		},
		computed: {
			selectIds() {
				return helpstore.selectTrave.map(v=>v._id)
			}
		},
		onLoad(e) {
			this.getTraveler();
			uni.$on('newTravel',this.pushTravel)//有新的添加
		},
		onUnload() {  
		// 移除监听事件  
			uni.$off('newTravel');
			uni.$off('editTravel');
		},
		methods: {
			addTraveler(){
				uni.navigateTo({
					url:"./traveler_add"
				})
			},
			getTraveler(){
				uniCloud.callFunction({
					name:"getTraveler"
					// data:this.params
				}).then(res=>{
					this.listTrave = res.result.data;
					if(this.selectIds.length>0){
						this.setSelect();
					}
				}).catch(err=>{
					uni.showModal({
						content: `获取数据失败，错误信息为：${err.message}`,
						showCancel: true
					})
				})
			},
			pushTravel(info){
				this.listTrave.push(info)
			},
			updateTravel(info){
				this.listTrave.forEach((v,i)=>{
					if(v.id === info.id || v._id == info._id){
						this.listTrave.splice(i,1,info)
						return;
					}
				})
			},
			setSelect(){
				this.listTrave.forEach(v=>{
					if(this.selectIds.includes(v._id)){
						this.$set(v,'selected',true)
					}
				})
			},
			saveTraveler(){
				const select = this.listTrave.filter(v=>v.selected);
				const pages = getCurrentPages();
				if(pages.length>1){
					uni.navigateBack({
						delta:1,
						success: () => {
							uni.$emit('newTraveInfo',select)
						}
					})
				}else{
					uni.navigateTo({
					    url: '/pages/order/order',
						success: () => {
							uni.$emit('newTraveInfo',select)
						}
					});
				}
			},
			change(e){
				var items = this.listTrave,
				     values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item._id)){
						this.$set(item,'selected',true)
					}else{
						this.$set(item,'selected',false)
					}
				}
			},
			editTravel(info){
				const id = info._id || info.id;
 				uni.navigateTo({
					url:'/pages/traveler/traveler_add?id='+ id,
					events:{
						editTravel:this.updateTravel
					},
					success: (res) => {
						let curRoute  = this.$mp.page.route;
						res.eventChannel.emit('fromPage', { from: curRoute })
					}
				})
			}
		}
	}
</script>

<style>
	.top-search{
		position: fixed;
		top:  var(--window-top);
		z-index: 13;
		width: 99%;
		background-color: #fff;
	}
	.scroll-Y{
		margin-top: 90rpx;
		margin-bottom: 90rpx;
	}
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 13;
	}
</style>
